<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>

<liferay-portlet:renderURL var="paymentslip">
	<portlet:param name="jspPage" value="/html/bankpayment/paymentslip.jsp"></portlet:param>
</liferay-portlet:renderURL>

<div id="crgis">
	<h1>Payment - Bank</h1>
 	<div class="content"> 
  	<span class="title">Procedure for Bank payment. </span>
    <hr>
		<strong>Print the Payment Advice/Slip.</strong><br> 
		The payment slip contains the information needed by the bank to access and update your payment on 
		this portal.<br><br>
		<p align="center">					
		<button onclick="window.location='<%=paymentslip%>'" type="button" class="aui-buttonitem-content aui-buttonitem-icon-label" style="text-align:center;">
			<span class="aui-buttonitem-icon aui-icon aui-icon-print"></span>
			<span class="aui-buttonitem-label">Click to Print Payment Advice/Slip</span>
		</button>
		</p>
		Select and Click to view Bank and the approved participating branches. Go to any bank/branch listed
		below to make all payments.<br><br>
		<div class="panels" style="width:80%; margin: 0 auto"> 
			<div class="demo-panels"> 
				<div id="bank1"> 
					<div class="aui-panel-content"> 
						<div class="aui-widget-hd aui-panel-hd aui-helper-clearfix">
							<span class="aui-panel-hd-text">First Bank of Nigeria Plc.</span> 
						</div> 
						<div class="aui-widget-bd"> 
							<span>
								<table width="100%" id="bankaddress">
									<tr>
										<td width="50%">17 Calabar Road <br> P.M.B 1020 <br> Calabar, Cross River<td>
										<td width="50%">126, Ndidem Usang Iso Road <br> Calabar <br> Cross River
									</tr>
								</table>											
							</span>
						</div> 
					</div> 
				</div> 
				<div id="bank2"> 
					<div class="aui-panel-content"> 
						<div class="aui-widget-hd aui-panel-hd aui-helper-clearfix">
							<span class="aui-panel-hd-text"> Diamond Bank Plc.</span> 
						</div> 
						<div class="aui-widget-bd"> 
						
						</div> 
					</div> 
				</div>
				<div id="bank3"> 
					<div class="aui-panel-content"> 
						<div class="aui-widget-hd aui-panel-hd aui-helper-clearfix">
						<span class="aui-panel-hd-text">FCMB</span> 
						</div> 
						<div class="aui-widget-bd"> 
						
						</div> 
					</div> 
				</div>	
			</div>
		</div>	

  </div>
</div>

<script type="text/javascript" charset="utf-8">

AUI().ready( 
	'aui-panel',  
	function(A) {  
		var panelFromMarkup = new A.Panel(  
			{  
				collapsible: true,  
				boundingBox: '#bank1', 
				collapsed: true,  
				contentBox: '#bank1 > .aui-panel-content'  
			}  
		).render();  
		
		var panelFromMarkup = new A.Panel(  
			{  
				collapsible: true,  
				boundingBox: '#bank2', 
				collapsed: true,  
				contentBox: '#bank2 > .aui-panel-content'  
			}  
		).render(); 
		
		var panelFromMarkup = new A.Panel(  
				{  
					collapsible: true,  
					boundingBox: '#bank3', 
					collapsed: true,  
					contentBox: '#bank3 > .aui-panel-content'  
				}  
			).render(); 			 
	});		 
</script> 


